<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>标题栏</title>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <script type="text/javascript" src="js/jquery-latest.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    
    <script type="text/javascript">


	    $(function () {
	    	//loadLocalJSON();

	    	initNavMenu($('#topframe', parent.document).attr("jsondata"));

	    	$('#top_menu > li > a').bind('mouseover', openSubMenu);
	    	$('#top_menu > li > a').bind('mouseout', closeSubMenu);
	    	
	    	$('#top_menu > li > a').bind('click', function(){
	    		//取得元素的兄弟节点切换其class为d2并设置当前选择为d1
	    		$(this).parent(".d2").siblings().attr("class", "d2");
	    		$(this).parent(".d2").attr("class", "d1");
	    	});
	
	    	/*绑定语言切换*/
	        $("#language_span").click(function (event) {
				/*取父页面装载*/
	            parent.$('#language_menu').menu({
	                minWidth: 10
	            });
	
	            parent.$('#language_menu').menu('show', {
	                left: event.pageX - 5,
	                top: event.pageY + 15
	            });
	        });
	    });

		/*初始化导航栏menu*/
	    function initNavMenu(jsonurl){
	    	$.get(jsonurl, function(content){ 
	    		var json = $.parseJSON(content);
	    		//debugger;
	    		$("#top_menu").html("");
	    		$.each(json.navs, function(i, item){
	    			addMenu(i, item);
	    		});
	    	}); 
		}

		function addMenu(i, obj){
			
			var str = '';

			if(i == 0){
				str += '<li class="d1">';
			}else{
				str += '<li class="d2">';
			}

			str += '<a id="_' + i + '"';
			
			if(obj.url.toString() == "js"){
				str += ' href="javascript:void(0);" ';
				str += ' onclick="parent.loadLocalJSON(' + i + ');" >';//maybe
			}else{
				str += ' href="#" >';
			}

			str += obj.name + '</a>';

			//alert(str);

			$("#top_menu").append(str);

			//加载二级菜单
			if(obj.menus.length > 0){
				//alert(obj.menus.length);
				putSecondMenus(i, obj);
			}
		}

		/*设置二级菜单*/
		function putSecondMenus(i, obj){

			//debugger;

			var id = 'menu_' + i;
			var str = '<div id="' + id + '"  class="easyui-menu" data-options="onClick:menuHandlerForIframe">';

			$.each(obj.menus, function(j, t){

				var menuStr = '<div href="javascript:void(0);" data-options="name:\'' + id + '\'"';

				if(t.hasNext.toString() == "true"){
					menuStr += ' onclick="load4Menu(' + i + j + ');">';
				}else{
					menuStr += ' onclick="alert(this.innerText);">';
				}
				
				menuStr += t.name + '</div>';

				str += menuStr;

				//alert(menuStr);

			});

			str += '</div>';

			//alert(str);

			$('#menu', parent.document).append(str);
			//$('#menu').append(str);
		}

		/*四级菜单加载*/
		function openSubMenu() {
			var menuId = '#menu'+$(this).attr('id');
			var y = $(this).offset().top;
			var x = $(this).offset().left;
			parent.$(menuId).menu({
				minWidth : 10
			}).menu('show', {
				left : x-16,
				top : y+26
			});
		}

		/*四级菜单关闭*/
		function closeSubMenu() {
			var menu = parent.$('#menu'+$(this).attr('id'));
			if(menu.length==0) return false;
			
			var offset = menu.offset();
			var top = offset.top;
			var left = offset.left;
			var bottom = top+menu.height();
			var right = left+menu.width();
			var x = event.x;
			var y = event.y+10;
			//alert("top="+top+",bottom="+bottom+",left="+left+",right="+right+",x="+x+",y="+y);
			if( x<left || x>right || y<top || y>bottom ){// 鼠标不在下拉菜单范围内，隐藏下拉菜单
				menu.menu('hide');
			}
		}
    
    </script>
</head>
<body>
    
    <div class="all">

        <div class="head">
            <div class="headl">
                <div class="logo">
                    <img src="images/chyine1.png" usemap="#Map" border="0" />
                    <map name="Map" id="Map">
                      <area shape="rect" coords="0,4,40,44" href="javascript:void(0);" target="_self" alt="" title="返回首页" onclick="parent.showIndex();"/>
                    </map>
                </div>
                <div class="daohang">
                    <ul id="top_menu">

                    </ul>
                </div>
            </div>
            <div class="headr">
                <div class="r1"></div>
                <div class="r2">
                    <div class="r3">
                        <div class="r4">
                            <ul>
                                <li><img src="images/chyine8.png" /></li>
                                <li>辽河油田用户 &nbsp;&nbsp;&nbsp;切换语言：&nbsp;</li>
                                <li><img id="language_span" src="images/chyine7.png" style="cursor: pointer;" /></li>
                                <li>&nbsp;&nbsp;<a href="login.html" style="color: #fff">注销</a></li>
                            </ul>
                        </div>
                        <div class="clear"></div>
                        
                        <marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>
                        	<a href="#" style="color: #fff">您有<font style="color:#F00"> 3 </font>条待办消息</a>
                        </marquee>
                        
                        <div>天气预报：北京 多云&nbsp; <img  src="images/c1.gif"/>&nbsp;13℃-24℃ &nbsp;当前时间：<span id="time"></span></div>
                         
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>

    </div>
    
</body>
</html>